<!--
 * @Description: 模板配置
 * @Autor: zhangzhanhua
 * @Date: 2021-12-03 14:17:49
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-12-27 10:41:21
-->
<template>
    <div class="addOrEdit">
        <div class="elFormWeb">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini" style="margin-bottom:5px;"></el-input>

            <el-tree class="templateTree" :data="treeNodeList" show-checkbox node-key="id" highlight-current :props="defaultProps" :default-expanded-keys='defaultExpandNodeList' :filter-node-method="filterNode" :default-checked-keys="selectNodeList" ref="tree">
            </el-tree>
        </div>
        <div class="userBtn">
            <el-button size="small" type="primary" @click="saveAdd">保 存</el-button>
        </div>

    </div>
</template>

<script>
export default {
    props: {
        //用户数据
        userData: {
            type: Object,
        },
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    data() {
        return {
            filterText: '',//过滤字段
            treeNodeList: [],//模板树
            selectNodeList: [],//选中项
            defaultExpandNodeList: [],//默认展开第一项
            //树依赖
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        };
    },
    mounted() {
        //获取模板树和默认选中项
        this.getTemplateTree();
    },
    methods: {
        filterNode(value, treeNodeList) {
            if (!value) return true;
            return treeNodeList.name.indexOf(value) !== -1;
        },
        /**
         * @description: 获取模板树和默认选中项
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        getTemplateTree() {
            const params = {
                accno: this.userData.accNo
            }
            this.$http.get(`/lvz-business-service/api/external/relateuser/${this.$version}/templatetree`, { params: params }).then(res => {
                if (res.data.success) {
                    this.treeNodeList = res.data.data.treeNodeList
                    this.selectNodeList = res.data.data.selectNodeList
                    //获取第一项列表id
                    this.defaultExpandNodeList = this.treeNodeList.map(item=>item.id)
                }
            })
        },
        /**
         * @description: 保存
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        saveAdd() {
            const dutyList = [] //控制节点id列表
            for (let nodeObj of this.$refs.tree.getCheckedNodes()) {
                let nodeObjKey = Object.keys(nodeObj)
                //通过taskId和duration两个必有的特征项渠道控制节点id
                if (nodeObjKey.includes('taskId') && nodeObjKey.includes('duration')) {
                    dutyList.push(nodeObj.id)
                }
            }

            const params = {
                accNo: this.userData.accNo,
                nodeIdList:dutyList
            }
            this.$http.put(`/lvz-business-service/api/external/relateuser/${this.$version}/nodeuser`, params).then(res => {
                if (res.data.success) {
                   this.$message.success(res.data.msg)
                   this.$emit('templateConfigClose')
                }else{
                   this.$message.error(res.data.msg)
                }
            })
        },
    },


};

</script>

<style lang="less" scoped>
.addOrEdit {
    .elFormWeb {
        // height: 654px;
        padding: 10px 10px 50px;
        overflow: auto;
        /deep/ .templateTree.el-tree {
            overflow: auto;
            height: 100%;
            background-color: #f5f7fa;
        }
    }
    .userBtn {
        z-index: 100;
        text-align: right;
        padding-right: 20px;
        border-top: 1px solid #c8cfde;
        background-color: #f5f7fa;
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
    }
}
</style>